<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查询所有</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="./element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="all">
    <button @click="findUsers">点我查询所有用户信息</button>
    <template>
        <el-table
                :data="users"
                stripe
                border
                style="width: 1080px">
            <el-table-column
                    prop="id"
                    label="编号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="userName"
                    label="名称"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="password"
                    label="密码"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="age"
                    label="性别"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="email"
                    label="邮箱"
                    width="180">
            </el-table-column>
        </el-table>
    </template>
</div>
<script src="./vue/dist/vue.js"></script>
<script src="./axios/dist/axios.js"></script>
<script src="./element-ui/lib/index.js"></script>
<script>
    var all = new Vue({
        el: "#all",
        data: {
            users: []
        },
        methods: {
            findUsers() {
                axios.get("/user/all")
                    .then((resp) => {
                        this.users = resp.data;
                    })
            }
        }
    })
</script>
</body>
</html>
